@charset 'utf-8';
@import './modules/header';
@import './modules/footer';
@import './modules/toCart';

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration:none;
	color: black;
}
li{
	list-style:none;
}

$width: 100%;
@mixin flexbox{
	display: flex;
	justify-content: center;
}
@mixin flexbox2{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: space-between;
}
@mixin center{
	margin: {
		left:auto;
		right:auto;
	};
}
@mixin a{
	display: inline-block;
	border-bottom: 1px solid;
	padding-bottom: 5px;
}

@mixin newspan{
	display: inline-block;
	border-bottom: 1px solid;
	padding-bottom: 4px;
}




main{
	.title{
	@include flexbox;
	};
	.title-big{
		font-size: 40px;
		margin-top: 30px;
	};
	.title-midden{
		font-size: 20px;
	};
	.title-min{
		a{
			display: inline-block;
			margin-bottom: 5px;
			margin-left: 40px;
			border-bottom: 1px solid;
		}
	};
	.bannerbox{
		width: 90%;
		@include center;
		.banner{
			width: 100%;
			height: 600px;
			// border:1px solid;
			margin-top: 30px;
			#imgbox{
				width: 100%;
				height: 100%;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.banner-info{
		font-size: 20px;
		p{
		margin-bottom: 0px;
		}
	};
	.more-tabby{
		width: 75%;
		margin-top: 80px;
		@include center;
		text-align: center;
		// border: 1px solid;
		.more-tabby-list{
			margin-top: 50px;
			.tabby-img-box{
			width: 25%;
			
			.ab{
				width: 100%;
				height: 30px;
				overflow: hidden;
				white-space: none;
				text-overflow: ellipsis;
				a{
					@include a;
				}
			}
			
			}
		}
	};
	.handbag{
		width: 95%;
		margin-top: 80px;
		@include center;
		@include flexbox;
		// border: 1px solid;
		.handbag-img{
			width: 50%;
			img{
				width: 100%;
			}
		};
		.handbag-info{
			width: 50%;
			@include flexbox;
			flex-direction: column;
			align-items: center;
			a{
				@include a;
				margin-top: 30px;
			}
		}
	};
	.hot-shop{
		width: 95%;
		height: 700px;
		@include center;
		margin-top: 80px;
		.hot-shop-txt{
			text-align: center;
		};
		.hot-shop-buy{
			width: 100%;
			height: 50px;
			margin-top: 30px;
			text-align: center;
			// line-height: 50px;
			a{
				margin-right: 30px;
				span{
					display: inline-block;
					border-bottom: 1px solid;
					padding-bottom: 4px;
				}
			}
		};
		
		.hot-shop-show{
			width: 100%;
			height: 500px;
			margin-top: 20px;
			.hot-shop-list{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				li{
					width: 33%;
					height: 100%;
					position: relative;
					img{
						width: 100%;
						height: 100%;
					};
					a{
						position: absolute;
						left: 35%;
						top: 90%;
						span{
							display: inline-block;
							border-bottom: 1px solid;
							padding-bottom: 4px;
						}
					}
				}
			}
		}
		
	};
	
	.coach-story{
		width: 95%;
		margin-top: 80px;
		@include center;
		h1{
			text-align: center;
		};
		.story-box{
			width: $width;
			height: 400px;
			margin-top: 50px;
			.story-txt{
				width: 50%;
				height: 100%;
				float:left;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				h3{
					text-align: center;
				}
				a{
					@include newspan;
				}
			};
			.story-img{
				width: 50%;
				height: 100%;
				float:left;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.home-love{
		margin-top: 80px;
		margin-bottom: 40px;
		text-align: center;
	};
	
	
	
};

.coach-serve{
		width: $width;
		height: 600px;
		background-color: #ebebeb;
		text-align: center;
		h2{
			padding: 50px;
		};
		.coach-serve-info{
			width: 80%;
			height: 400px;
			@include center;
			@include flexbox2;
			dl{
				width: 25%;
				img{
				width: 40px;
				height: 40px;
				};
				dd{	
					// border: 1px solid;
					p{
						width: 200px;
						height: 40px;
						margin-bottom: 0;
						font-size: 12px;
						@include center;
						// border: 1px solid;
					};
					a{
						// @include a;
						@include newspan;
						margin-top: 10px;
					}
				}
			}
		}
	};
	
